<template>
  <div>
    {{num}} -- {{name}} -- {{obj}}
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted, useRoute } from 'vue'
export default defineComponent({
  name: 'LifeCycleTest',
  // 组件创建的过程
  setup () {
    console.log('start init...');

    let num = ref(null)
    let name = ref('')
    let obj = ref({})
    let route = useRoute()

    // 组件挂载的过程，包括数据、dom
    onMounted(() => {
      // 发请求、数据初始化的操作，接收路由传递的参数
      console.log('do onMounted');
      num.value = route.params.num * 1
      name.value = route.params.name
      obj.value = JSON.parse(route.params.obj)
    })

    // 组件卸载时的生命周期
    onUnmounted(() => {
      // 清除定时器、闭包函数
    })

    return {
      num,
      name,
      obj
    }
  }
})
</script>

<style lang="scss" scoped>
</style>